<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<title></title>
	</head>
	<body>
		
		<!-- 导航 -->
		
		<nav class="navbar navbar-default navbar-inverse">
		  <div class="container">
		    <!-- Brand and toggle get grouped for better mobile display -->
		    <div class="navbar-header">
		      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
		        <span class="sr-only">Toggle navigation</span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		      </button>
		      <a class="navbar-brand logo" href="#" class="logo"><img src="img/Steffi_sign1.png" class="img-responsive"></a>
		    </div>
		
		
		
		
		    <!-- Collect the nav links, forms, and other content for toggling -->
		    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		      <ul class="nav navbar-nav">
		        <li class="active"><a href="index.html">首页 <span class="sr-only">(current)</span></a></li>
		        <li><a href="PIC_Ghost.html">图片</a></li>
				<li><a href="video_Ghost.html">视频</a></li>
				<li><a href="#">新闻动态</a></li>
				<li><a href="#">开发者中心</a></li>
				<!-- <li><a href="#">开发者社区</a></li>
				<li><a href="#">开放平台</a></li> -->
				<li><a href="AboutUs.html">关于我们</a></li>
		        <!-- <li class="dropdown">
		          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
		          <ul class="dropdown-menu">
		            <li><a href="#">Action</a></li>
		            <li><a href="#">Another action</a></li>
		            <li><a href="#">Something else here</a></li>
		            <li role="separator" class="divider"></li>
		            <li><a href="#">Separated link</a></li>
		            <li role="separator" class="divider"></li>
		            <li><a href="#">One more separated link</a></li>
		          </ul>
		        </li> -->
		      </ul>
		      
		      <ul class="nav navbar-nav navbar-right">
		        
		        <li class="dropdown">
		          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Language <span class="caret"></span></a>
		          <ul class="dropdown-menu">
		            <li><a href="#">中文</a></li>
		            <li><a href="#">English</a></li>
		
		          </ul>
		        </li>
		      </ul>
		    </div><!-- /.navbar-collapse -->
		  </div><!-- /.container-fluid -->
		</nav>
		
		<div class="audiobox">
			<div class="loading">Music Line</div>
		</div>
		<div class="audiobox">
			
			
				<audio src="./audio/嘻嘻琳%20-%20《MELANCHOLY》-MELANCHOLY%20(嘻嘻琳%20remix).mp3"  controls preload id="music1">
			    </audio>
		</div>
		<div class="audiobox">
			
			<button class="btn btn-primary btn-ghost btn-shine" id="bf" onclick="bf();">播放</button>
			 <button class="btn btn-primary btn-ghost btn-shine" onclick="rbf();">重新播放</button>
				
		</div>
		
		
		<div class="lunbo">
			...
				<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
				  <!-- Indicators -->
				  <ol class="carousel-indicators">
				    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
				    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
				    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
					<li data-target="#carousel-example-generic" data-slide-to="3"></li>
					<li data-target="#carousel-example-generic" data-slide-to="4"></li>
					<li data-target="#carousel-example-generic" data-slide-to="5"></li>

				  </ol>
				
				  <!-- Wrapper for slides -->
				  <div class="carousel-inner" role="listbox">
				    <div class="item active">
				      <img src="img/shouye/PIC_Ghost1.jpg" alt="...">
				      <div class="carousel-caption">
				        
				      </div>
				    </div>
				    <div class="item">
				      <img src="img/shouye/PIC_Ghost2.jpg" alt="...">
				      <div class="carousel-caption">
				        
				      </div>
				    </div>
					<div class="item">
					  <img src="img/shouye/PIC_Ghost3.jpg" alt="...">
					  <div class="carousel-caption">
					    
					  </div>
					</div>
					<div class="item">
					  <img src="img/shouye/PIC_Ghost4.jpg" alt="...">
					  <div class="carousel-caption">
					    
					  </div>
					</div>
					<div class="item">
					  <img src="img/shouye/PIC_Ghost5.jpg" alt="...">
					  <div class="carousel-caption">
					    
					  </div>
					</div>
					<div class="item">
					  <img src="img/shouye/PIC_Ghost6.jpg" alt="...">
					  <div class="carousel-caption">
					    
					  </div>
					</div>
					
				    <!-- <div class="item">
				      <img src="img/lunbo/1.jpg" alt="...">
				      <div class="carousel-caption">
				        ...
				      </div>
				    </div>
					<div class="item">
					  <img src="img/lunbo/1.jpg" alt="...">
					  <div class="carousel-caption">
					    ...
					  </div>
					</div>
					<div class="item">
					  <img src="img/lunbo/1.jpg" alt="...">
					  <div class="carousel-caption">
					    ...
					  </div>
					</div> -->
				  </div>
				
				  <!-- Controls -->
				  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
				    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				    <span class="sr-only">Previous</span>
				  </a>
				  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
				    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				    <span class="sr-only">Next</span>
				  </a>
				</div>
				<div class="bot">..</div>
		</div>
		
		
		<div class="dssiv">
			
		</div>
		
		
	
		
		
		
		
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
				<script type="text/javascript" src="js/bootstrap.js">
					
				</script>
		<script type="text/javascript">
			let loading = document.querySelector(".loading");
			let letters = loading.textContent.split("");
			loading.textContent = "";
			letters.forEach((letter, i) => {
			  let span = document.createElement("span");
			  span.textContent = letter;
			  span.style.animationDelay = `${i / 10}s`;
			  loading.append(span);
			});
		
		</script>
		    <script>
		        function rbf() {
		            var audio = document.getElementById('music1');
		            var bf=document.getElementById("bf");
		            audio.currentTime = 0;
		            audio.play();
		            bf.innerText="暂停";
		        }
		
		        function bf() {
		            var audio = document.getElementById('music1');
		            var bf=document.getElementById("bf");
		            if (audio !== null) {
		                if (audio.paused) {
		                    audio.play(); //audio.play();// 这个就是播放  
		                    bf.innerText="暂停";
		                } else {
		                    audio.pause(); // 这个就是暂停
		                    bf.innerText="播放";
		                }
		            }
		        }
		    </script>
	</body>
</html>
